export const initParticles = (canvasId: string) => {
  const canvas = document.getElementById(canvasId) as HTMLCanvasElement
  if (!canvas) return

  const ctx = canvas.getContext('2d')
  if (!ctx) return

  // 设置 canvas 尺寸
  const setCanvasSize = () => {
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
  }
  setCanvasSize()
  window.addEventListener('resize', setCanvasSize)

  // 粒子类
  class Particle {
    x: number = 0
    y: number = 0
    size: number = 0
    speedX: number = 0
    speedY: number = 0
    opacity: number = 0
    color: string = '#ffffff'

    constructor() {
      this.reset()
    }

    reset() {
      this.x = Math.random() * canvas.width
      this.y = Math.random() * canvas.height
      this.size = Math.random() * 2 + 1
      this.speedX = (Math.random() - 0.5) * 0.5
      this.speedY = (Math.random() - 0.5) * 0.5
      this.opacity = Math.random() * 0.5 + 0.2
      this.color = '#ffffff'
    }

    update() {
      this.x += this.speedX
      this.y += this.speedY

      // 边界检查
      if (this.x < 0 || this.x > canvas.width || 
          this.y < 0 || this.y > canvas.height) {
        this.reset()
      }
    }

    draw() {
      if (!ctx) return
      ctx.beginPath()
      ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)
      ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`
      ctx.fill()
    }
  }

  // 创建粒子数组
  const particles: Particle[] = []
  const particleCount = Math.min(window.innerWidth / 10, 100)
  for (let i = 0; i < particleCount; i++) {
    particles.push(new Particle())
  }

  // 鼠标交互
  const mouse = {
    x: 0,
    y: 0,
    radius: 100
  }
  
  const handleMouseMove = (e: MouseEvent) => {
    mouse.x = e.clientX
    mouse.y = e.clientY
  }
  
  canvas.addEventListener('mousemove', handleMouseMove)

  // 动画循环
  let animationFrameId: number
  const animate = () => {
    if (!ctx) return
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    
    particles.forEach(particle => {
      particle.update()
      particle.draw()

      // 绘制连线
      particles.forEach(otherParticle => {
        const dx = particle.x - otherParticle.x
        const dy = particle.y - otherParticle.y
        const distance = Math.sqrt(dx * dx + dy * dy)

        if (distance < 80) {
          ctx.beginPath()
          ctx.strokeStyle = `rgba(255, 255, 255, ${0.2 * (1 - distance/80)})`
          ctx.lineWidth = 0.5
          ctx.moveTo(particle.x, particle.y)
          ctx.lineTo(otherParticle.x, otherParticle.y)
          ctx.stroke()
        }

        // 鼠标交互
        const mouseDistance = Math.sqrt(
          (particle.x - mouse.x) ** 2 + 
          (particle.y - mouse.y) ** 2
        )

        if (mouseDistance < mouse.radius) {
          const force = (mouse.radius - mouseDistance) / mouse.radius
          const angle = Math.atan2(particle.y - mouse.y, particle.x - mouse.x)
          particle.x += Math.cos(angle) * force * 2
          particle.y += Math.sin(angle) * force * 2
        }
      })
    })

    animationFrameId = requestAnimationFrame(animate)
  }

  animate()

  // 清理函数
  return () => {
    window.removeEventListener('resize', setCanvasSize)
    canvas.removeEventListener('mousemove', handleMouseMove)
    cancelAnimationFrame(animationFrameId)
  }
} 